<template>
  <section class="gw-panel">
    <header v-if="$slots.header || header" class="header">
      <slot name="header">
        <GwTitle :color="color">{{ header }}</GwTitle>
      </slot>
    </header>
    <main class="body" :style="bodyStyle">
      <slot />
    </main>
  </section>
</template>

<script>
import GwTitle from './title'

export default {
  name: 'GwPanel',
  components: {
    GwTitle
  },
  props: {
    header: String,
    bodyStyle: Object,
    color: String
  }
}
</script>

<style lang="scss">
@import "~@style";

// $shadow-focus: 0 10px 24px 0 rgba(0,0,0,.24);

.gw-panel {
  background-color: $white;
  border-radius: 1em;
  box-shadow: 0 4px 6px 0 rgba(0,0,0,.06);

  .header {
    padding: 1em 0;
  }

  .body {
    padding: 15px;
  }

  .ui-dark-mode & {
    background-color: rgba(0,0,0,.12);

    .body {
      color: rgba(255,255,255,.6);
    }
  }

  // themes
  @each $prop, $value in $themes {
    &.#{$prop} .header .gw-title > span {
      border-left-color: $value;
    }

    .ui-dark-mode &.#{$prop} .header .gw-title > span {
      border-left-color: darken($value, $ui-color-darken-percent);
    }
  }
}
</style>
